import React, { forwardRef, useState, useEffect } from 'react'
import './style/Newinfo3.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Newinfo3 = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {

        let list = [
            { name: "暴雨洪水", value: 88 },
            { name: "台风", value: 75 },
            { name: "龙卷风", value: 66 },
            { name: "雪灾", value: 66 },
            { name: "高温热浪", value: 66 },
        ]
        var myChart = echarts.init(document.getElementById("Newinfo3_barli"));
        var option = {
            backgroundColor: '#dbf1fd',
            title: {
                text: '2023年灾害分布',
                textStyle: {
                    color: '#000',
                    fontSize: 25
                },
                top: "10%",
                left: 'center',
                // 		right: '5%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
            grid: {
                // left: '12%',
                // top: '25%',
                // bottom: '30%',
                // right: '10%',
            },
            xAxis: {
                // name: 'X',
                nameTextStyle: {
                    color: '#333333',
                    padding: [0, 0, 0, 20],
                },
                show: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7bb4dc',
                        shadowColor: 'rgba(91,100,134,1)',
                        shadowOffsetX: '20',
                    },
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 25],
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.2)',
                    },
                },
                axisLabel: {
                    show: true,
                    // rotate: -1,
                    textStyle: {
                        fontSize: 14,
                        // fontFamily: PangMenZhengDao,
                        fontWeight: 600,
                        color: '#000',
                    },
                },
                axisTick: {
                    show: false,
                },
                // 		data: ['物业纠纷', '其他合同', '道路交通']
                data: list.map(val => {
                    return val.name
                })
            },
            yAxis: [{
                nameTextStyle: {
                    color: '#333333',
                    padding: [0, 0, 0, 20],
                },
                max: 123,
                min: 0,
                splitNumber: (123 % 5).toFixed(0),
                show: true,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    symbol: ['none', 'arrow'],
                    symbolOffset: [0, 15],
                    lineStyle: {
                        // color: 'rgba(255, 129, 109, 0.1)',
                        width: 1, //这里是为了突出显示加上的
                        color: '#7bb4dc',
                        shadowColor: 'rgba(91,100,134,1)',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 12,
                        // fontFamily: PangMenZhengDao,
                        fontWeight: 600,
                        color: '#000'
                    },
                },
                splitArea: {
                    areaStyle: {
                        color: 'rgba(255,255,255,.5)',
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#cfe9f9',
                        width: 1,
                        type: 'solid',
                    },
                }
            }],
            series: [{
                type: 'pictorialBar',
                barCategoryGap: '-20%',
                /*多个并排柱子设置柱子之间的间距*/
                // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
                label: {
                    show: true,
                    position: 'top',
                    distance: 10,
                    color: '#000',
                    fontWeight: 'bolder',
                    fontSize: 12,
                },
                itemStyle: {
                    // normal: {
                    //   color: {
                    //     type: 'linear',
                    //     x: 0,
                    //     y: 0,
                    //     x2: 0,
                    //     y2: 1,
                    //     colorStops: [
                    //       {
                    //         offset: 0,
                    //         color: '#3b89f4',
                    //       },
                    //       {
                    //         offset: 1,
                    //         color: '#cce7fc',
                    //       },
                    //     ],
                    //     global: false, //  缺省为  false
                    //   },
                    // },
                    // emphasis: {
                    //   opacity: 1,
                    // },
                    normal: {
                        color: params => {
                            const colorList = [{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#297ff2',
                                },
                                {
                                    offset: 1,
                                    color: '#cce7fc',
                                },
                                ]
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#3bfafe',
                                },
                                {
                                    offset: 1,
                                    color: '#aaf4fe',
                                },
                                ]
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#3bfafe',
                                },
                                {
                                    offset: 1,
                                    color: '#aaf4fe',
                                },
                                ]
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#3bfafe',
                                },
                                {
                                    offset: 1,
                                    color: '#aaf4fe',
                                },
                                ]
                            },
                            {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#e08440',
                                },
                                {
                                    offset: 1,
                                    color: '#decabd',
                                },
                                ]
                            }
                            ];
                            return colorList[params.dataIndex];
                        },
                        opacity: 0.7
                    },
                    // 鼠标移入柱子上 透明度变为 1
                    emphasis: {
                        opacity: 1,
                    },
                },
                data: list.map(v => {
                    return v.value
                })
                // data: [123, 60, 25]
            },],


        };
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar2 = () => {


        var myChart = echarts.init(document.getElementById("Newinfo3_barli2"));
        var option = {
            backgroundColor: '#0D2753',
            tooltip: {
                //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
                confine: true,
                enterable: true, //鼠标是否可以移动到tooltip区域内
            },
            title: {
                text: '未来气象危害可能占比',
                textStyle: {
                  color: "#ccc",
                  fontSize: 25
                },
                top: "0%",
                left: 'center',
                // 		right: '5%'
              },
            radar: {
                name: {
                    textStyle: {
                        color: '#05D5FF',
                        fontSize: 14,
                    },
                },
                shape: 'polygon',
                center: ['50%', '50%'],
                radius: '80%',
                startAngle: 120,
                scale: true,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(5, 213, 255, .8)',
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: 'rgba(5, 213, 255, .8)', // 设置网格的颜色
                    },
                },
                indicator: [
                    {
                        name: '暴雨洪水',
                        max: 100,
                    },
                    {
                        name: '台风',
                        max: 100,
                    },
                    {
                        name: '龙卷风',
                        max: 100,
                    },
                    {
                        name: '雪灾',
                        max: 100,
                    },
                    {
                        name: '高温热浪',
                        max: 100,
                    },
                    {
                        name: '冰雹',
                        max: 100,
                    },
                ],
                splitArea: {
                    show: false,
                },
            },
            grid: {
                position: 'center',
            },
            polar: {
                center: ['50%', '50%'], // 默认全局居中
                radius: '0%',
                
            },
            angleAxis: {
                min: 0,
                interval: 5,
                clockwise: false,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
            radiusAxis: {
                min: 0,
                interval: 20,
                splitLine: {
                    show: false,
                },
            },
            series: [
                {
                    name: '灾害列表',
                    type: 'radar',
                    symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
                    symbolSize: 10, // 拐点的大小
                    itemStyle: {
                        normal: {
                            color: '#05D5FF',
                        },
                    },
                    areaStyle: {
                        normal: {
                            color: '#05D5FF',
                            opacity: 0.5,
                        },
                    },
                    lineStyle: {
                        width: 2,
                        color: '#05D5FF',
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: (params) => {
                                return params.value;
                            },
                            color: '#fff',
                        },
                    },
                    data: [
                        {
                            value: [20, 50, 60, 60, 90, 80],
                        },
                    ],
                },
            ],
        };
        

        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }

    useEffect(() => {
        drawbar()
        drawbar2()
        console.log(infodata);
        getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='Newinfo3_showli'>
            {/* {drawlist()} */}
            <div id='Newinfo3_barli'></div>
            <div id='Newinfo3_barli2'></div>
        </div>
    )
})

export default Newinfo3